<template>
  <div class="app-container">
    <div class="app-top">
      <div class="input-line">
        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">选择全部</el-checkbox>
      </div>
      <div class="input-line">
        <el-link :disabled="checkedCities.length===0" :underline="false" @click="submit()">标记为已读</el-link>
      </div>
      <div class="input-line">
        <span class="input-label">是否只查看未读：</span>
        <el-switch v-model="tableParam.isRead" :active-value="0" :inactive-value="null" @change="tableParam.page=1,fetchData()" />
      </div>
    </div>
    <el-checkbox-group v-model="checkedCities" v-loading="listLoading" class="msg" @change="handleCheckedCitiesChange">
      <div v-for="item in list" :key="item.id">
        <el-checkbox :label="item.id">
          <div class="msg-item">
            <el-tag v-if="item.isRead==3" type="warning">最新未读</el-tag>
            <el-tag v-if="item.isRead==1" type="success">已读</el-tag>
            <el-tag v-if="item.isRead==0" type="danger">未读</el-tag>
            {{ item.messageInfo }}
          </div>
        </el-checkbox>
      </div>

    </el-checkbox-group>
    <div class="app-pagination">
      <el-pagination :current-page.sync="tableParam.page" :page-sizes="[15, 30, 60,100]" :page-size="tableParam.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="sizeData" @current-change="fetchData()" />
      <el-button type="primary" size="mini" icon="el-icon-refresh" @click="fetchData()">刷新</el-button>
    </div>
  </div>
</template>
<script>
import { getDatas, readMessage } from '@/api/msg'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      list: [],
      listLoading: true,
      total: 0,
      tableParam: {
        page: 1,
        pageSize: 15,
        isRead: 0,
        messageType: 3
      },
      checkAll: false,
      isIndeterminate: false,
      checkedCities: []
    }
  },
  computed: {
    ...mapGetters([
      'msgList'
    ])
  },
  watch: {
    msgList() {
      const list = this.msgList.filter(res => (res.messageType * 1 === 3))
      if (list.length !== 0) {
        this.list.splice(0, 0, { ...list[0], isRead: 3 })
        this.$store.dispatch('msg/clearMsg')
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    sizeData(e) {
      this.tableParam.page = 1
      this.tableParam.pageSize = e
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      getDatas(this.tableParam).then(res => {
        this.list = res.data.row
        this.total = res.data.total
        this.listLoading = false
        this.checkAll = false
        this.isIndeterminate = false
        this.checkedCities = []
      })
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.list.map(res => (res.id)) : []
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.list.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.list.length
    },
    submit() {
      const _this = this
      const ids = this.checkedCities.join(',')
      readMessage({ messageIdStr: ids }).then(res => {
        if (res.code * 1 === 200) {
          _this.$message.success('修改消息已读成功')
          _this.fetchData()
          getDatas({ isRead: 0, messageType: 3 }).then(res => {
            _this.$store.dispatch('msg/setMegnum', res.data.total)
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.pages {
  height: 100%;
  padding: 20px;
  display: flex;
}
.msg {
  padding: 20px 20px 0 20px;
}
.msg-item {
  padding: 10px 0;
}
</style>
